day27 智能架構圖生成器升級：雲端搜尋RAG與架構圖生成展示

16th鐵人賽 rag langchain (python) streamlit diagram as code

jay0810

團隊不時以註解遮羞的實習同學

2024-09-26 20:31:46

601 瀏覽

分享至

前言

昨天我們利用LangChain驅動我們的生成雲端架構圖系統，成功輔以AWS Kendra的文件搜尋功能作為RAG技術的實現，那麼今天我們同樣的會改進我們的介面，使得操作上更加友善!

正文

streamlit介面

以day26的程式碼為例，我們將增加streamlit的程式碼

# 5. Streamlit 介面設計
st.title("雲端架構圖生成器 :cloud:")
st.write(
    "輸入您的雲端架構需求，系統將自動生成相應的程式碼，讓您的雲端設計更快捷！",
    unsafe_allow_html=True,
)
st.markdown("---")
st.subheader("請輸入架構需求 :pencil:")
user_input = st.text_input("", placeholder="例如：我想要一個保證安全性的網站系統雲端架構圖",)

st.markdown("---")
# 按鈕觸發生成
if st.button("生成雲端架構圖", help="點擊按鈕生成架構圖"):
    if user_input:
        with st.spinner("生成中，請稍候..."):
            try:
                # 呼叫 RAG Chain 進行生成
                rchain_response = rag_chain.invoke(user_input)
                st.success("程式碼生成成功！")
                st.code(rchain_response, language="python")
            except Exception as e:
                st.error(f"生成程式碼時發生錯誤：{e}")
    else:
        st.warning("請輸入需求後再進行生成")

完整程式碼

# langChain
from langchain_core.prompts import PromptTemplate
from langchain_openai import ChatOpenAI
import os
from langchain_core.output_parsers import StrOutputParser
from langchain_community.retrievers import AmazonKendraRetriever

# streamlit
import streamlit as st

# 1. Create model
os.environ["OPENAI_API_KEY"] = "你的OpenAI API key"

model = ChatOpenAI(model_name="gpt-4o")


# 2. retriever
retriever = AmazonKendraRetriever(
    index_id="你的kendra index id",
    min_score_confidence=0.5)


# 4. Create chain
template = """你將成為一個雲端架構圖設計師，使用 Python 的 diagrams 函式庫，生成AWS的雲端架構圖。
請依照使用者的需求，設計一個安全、高效的雲端架構，並確保使用相關的雲端服務，如 VPC、負載均衡、Kubernetes、儲存服務、資料庫等。
你可以自由發揮，但每個服務的選擇都需要合理解釋，並考慮擴展性、安全性和效能優化。

以下是一個基本範例，你可以基於此來自訂使用者的需求：

```python

from diagrams import Cluster, Diagram
from diagrams.aws.network import VPC, ElasticLoadBalancing, CloudFront, Route53, ClientVpn
from diagrams.aws.compute import EKS
from diagrams.aws.database import Aurora, RDS, Elasticache
from diagrams.aws.storage import FSx, S3
from diagrams.aws.management import Cloudwatch
from diagrams.aws.security import IAM, KMS, SecurityHub, Shield
from diagrams.onprem.client import Users

# 使用者可調整這個架構設計
with Diagram("Secure Website System Architecture", show=False):
    # 定義使用者、網路、計算、資料庫、儲存、運營和安全等模組
    # 添加每個服務的設計思路
```


請你自動根據使用者給定的架構需求，進行設計，並解釋每個服務的選擇理由。


有以下簡單的規則請注意
- 將每個雲端服務分別定義，並使用合適的 `Cluster` 來組織它們。
- 每個 `Cluster` 的 `graph_attr` 應該設置顏色。
- 請用 ``` ``` 來包裹程式碼，並確保裡面只有程式碼。
- security這類別是自由的!，不需要連結到其他服務

以下是參考資料：        
{context}


最後是重要的使用者要求:
{user_input}

"""
custom_rag_prompt = PromptTemplate.from_template(template)


def format_docs(docs):
    return "\n\n".join(doc.page_content for doc in docs)


rag_chain = (
    {"context": retriever | format_docs, "user_input": lambda x: x}
    | custom_rag_prompt
    | model
    | StrOutputParser()
)


# 5. Streamlit 介面設計
st.title("雲端架構圖生成器 :cloud:")
st.write(
    "輸入您的雲端架構需求，系統將自動生成相應的程式碼，讓您的雲端設計更快捷！",
    unsafe_allow_html=True,
)
st.markdown("---")
st.subheader("請輸入架構需求 :pencil:")
user_input = st.text_input("", placeholder="例如：我想要一個保證安全性的網站系統雲端架構圖",)

st.markdown("---")
# 按鈕觸發生成
if st.button("生成雲端架構圖", help="點擊按鈕生成架構圖"):
    if user_input:
        with st.spinner("生成中，請稍候..."):
            try:
                # 呼叫 RAG Chain 進行生成
                rchain_response = rag_chain.invoke(user_input)
                st.success("程式碼生成成功！")
                st.code(rchain_response, language="python")
            except Exception as e:
                st.error(f"生成程式碼時發生錯誤：{e}")
    else:
        st.warning("請輸入需求後再進行生成")

實際操作

好的，根據您的需求，我將設計一個安全、高效且具有擴展性的網站系統雲端架構圖。這個架構圖將使用AWS的多種雲端服務，包括VPC、負載均衡、Kubernetes、儲存服務、資料庫等。

以下是設計思路：
1. **VPC (Virtual Private Cloud)**: 提供隔離的網路環境，確保網路安全。
2. **Elastic Load Balancing (ELB)**: 提供負載均衡，分發流量到多個實例，增強高可用性。
3. **EKS (Elastic Kubernetes Service)**: 使用Kubernetes進行容器編排，管理應用的部署和擴展。
4. **Aurora**: 高效能且自動擴展的關聯型資料庫，適合高流量應用。
5. **S3**: 用於儲存靜態資源和備份資料。
6. **CloudFront**: 提供內容傳遞網路(CDN)，加速全球的內容傳輸。
7. **Security Services**: 包括IAM、KMS、SecurityHub和Shield，提供全面的安全性管理。

以下是架構圖的Python程式碼：

```python
from diagrams import Cluster, Diagram
from diagrams.aws.network import VPC, ElasticLoadBalancing, CloudFront, Route53
from diagrams.aws.compute import EKS
from diagrams.aws.database import Aurora
from diagrams.aws.storage import S3
from diagrams.aws.management import Cloudwatch
from diagrams.aws.security import IAM, KMS, SecurityHub, Shield
from diagrams.onprem.client import Users

# 設計架構圖
with Diagram("Secure Website System Architecture", show=False):

    users = Users("Users")

    with Cluster("Security", graph_attr={"color": "red"}):
        iam = IAM("IAM")
        kms = KMS("KMS")
        securityhub = SecurityHub("SecurityHub")
        shield = Shield("Shield")

    with Cluster("Network", graph_attr={"color": "lightblue"}):
        vpc = VPC("VPC")
        elb = ElasticLoadBalancing("ELB")

    with Cluster("Compute", graph_attr={"color": "orange"}):
        eks = EKS("EKS")

    with Cluster("Storage", graph_attr={"color": "purple"}):
        s3 = S3("S3")

    with Cluster("Database", graph_attr={"color": "yellow"}):
        aurora = Aurora("Aurora")

    cloudfront = CloudFront("CloudFront")
    route53 = Route53("Route53")

    # 連接各個模組
    users >> route53 >> cloudfront >> elb >> eks
    eks >> s3
    eks >> aurora
    eks >> cloudfront
    eks >> s3
    eks >> aurora

    # 安全模組
    iam
    kms
    securityhub
    shield
```

### 服務選擇理由：

1. **VPC**: 提供隔離的網路環境，允許我們設置子網、路由表和安全組，確保內部通信的安全性。
2. **Elastic Load Balancing (ELB)**: 分發流量到多個實例，提供高可用性和自動縮放能力。
3. **EKS**: 使用Kubernetes進行容器編排，管理應用的部署和擴展，確保應用具有高彈性和可擴展性。
4. **Aurora**: 高效能且自動擴展的關聯型資料庫，提供可靠的數據存儲和高效能查詢。
5. **S3**: 用於儲存靜態資源和備份資料，提供高可用性和耐久性。
6. **CloudFront**: 提供全球內容傳遞，減少延遲，提高用戶體驗。
7. **IAM、KMS、SecurityHub、Shield**: 提供全面的安全性管理，包括身份驗證、數據加密、威脅檢測和DDoS防護。

這樣的架構設計不僅符合用戶的安全性要求，還確保了系統的高效能和可擴展性。

改進與編譯架構圖

當然有個介面可以直接讓使用者輸入很好，但是不呈現架構圖給使用者，只呈現程式碼有點說不過去，接著我們嘗試擷取程式碼並且編譯後展示吧!

# 5. Streamlit 介面設計
st.title("雲端架構圖生成器 :cloud:")
st.write(
    "輸入您的雲端架構需求，系統將自動生成相應的程式碼，讓您的雲端設計更快捷！",
    unsafe_allow_html=True,
)
st.markdown("---")
st.subheader("請輸入架構需求 :pencil:")
user_input = st.text_input("", placeholder="例如：我想要一個保證安全性的網站系統雲端架構圖",)

st.markdown("---")
# 按鈕觸發生成
if st.button("生成雲端架構圖", help="點擊按鈕生成架構圖"):
    if user_input:
        with st.spinner("生成中，請稍候..."):
            try:
                # 呼叫 RAG Chain 生成程式碼
                rchain_response = rag_chain.invoke(user_input)

                # 提取 ``` 內的程式碼
                code_pattern = r"```python(.*?)```"
                match = re.search(code_pattern, rchain_response, re.DOTALL)

                # 保留程式碼以外的說明文字
                explanation = re.sub(
                    code_pattern, "", rchain_response, flags=re.DOTALL).strip()
                if explanation:
                    st.markdown("### 架構設計說明")
                    st.write(explanation)

                if match:
                    # 取得程式碼
                    diagram_code = match.group(1).strip()

                    # 建立執行環境並執行程式碼
                    exec(diagram_code)

                    # 顯示生成的架構圖
                    st.image(f"secure_website_system_architecture.png",
                             caption="生成的架構圖", use_column_width=True)
                    st.success("架構圖生成成功！")
                else:
                    st.error("未能擷取到程式碼，請檢查輸入內容或格式。")
            except Exception as e:
                st.error(f"生成程式碼時發生錯誤：{e}")
    else:
        st.warning("請輸入需求後再進行生成")

完整程式碼

# langChain
from langchain_core.prompts import PromptTemplate
from langchain_openai import ChatOpenAI
import os
from langchain_core.output_parsers import StrOutputParser
from langchain_community.retrievers import AmazonKendraRetriever

# streamlit
import streamlit as st
import re

# run command streamlit run day27.py

# 1. Create model
os.environ["OPENAI_API_KEY"] = ""

model = ChatOpenAI(model_name="gpt-4o")


# 2. retriever
retriever = AmazonKendraRetriever(
    index_id="",
    min_score_confidence=0.5)


# 4. Create chain
template = """你將成為一個雲端架構圖設計師，使用 Python 的 diagrams 函式庫，生成AWS的雲端架構圖。
請依照使用者的需求，設計一個安全、高效的雲端架構，並確保使用相關的雲端服務，如 VPC、負載均衡、Kubernetes、儲存服務、資料庫等。
你可以自由發揮，但每個服務的選擇都需要合理解釋，並考慮擴展性、安全性和效能優化。

以下是一個基本範例，你可以基於此來自訂使用者的需求：

```python

from diagrams import Cluster, Diagram
from diagrams.aws.network import VPC, ElasticLoadBalancing, CloudFront, Route53, ClientVpn
from diagrams.aws.compute import EKS
from diagrams.aws.database import Aurora, RDS, Elasticache
from diagrams.aws.storage import FSx, S3
from diagrams.aws.management import Cloudwatch
from diagrams.aws.security import IAM, KMS, SecurityHub, Shield
from diagrams.onprem.client import Users

# 使用者可調整這個架構設計
with Diagram("Secure Website System Architecture", show=False):
    # 定義使用者、網路、計算、資料庫、儲存、運營和安全等模組
    # 添加每個服務的設計思路
```


請你自動根據使用者給定的架構需求，進行設計，並解釋每個服務的選擇理由。


有以下簡單的規則請注意
- 將每個雲端服務分別定義，並使用合適的 `Cluster` 來組織它們。
- 每個 `Cluster` 的 `graph_attr` 應該設置顏色。
- 請用 ``` ``` 來包裹程式碼，並確保裡面只有程式碼。
- security這類別是自由的!，不需要連結到其他服務

以下是參考資料：        
{context}


最後是重要的使用者要求:
{user_input}

"""
custom_rag_prompt = PromptTemplate.from_template(template)


def format_docs(docs):
    return "\n\n".join(doc.page_content for doc in docs)


rag_chain = (
    {"context": retriever | format_docs, "user_input": lambda x: x}
    | custom_rag_prompt
    | model
    | StrOutputParser()
)


# 5. Streamlit 介面設計
st.title("雲端架構圖生成器 :cloud:")
st.write(
    "輸入您的雲端架構需求，系統將自動生成相應的程式碼，讓您的雲端設計更快捷！",
    unsafe_allow_html=True,
)
st.markdown("---")
st.subheader("請輸入架構需求 :pencil:")
user_input = st.text_input("", placeholder="例如：我想要一個保證安全性的網站系統雲端架構圖",)

st.markdown("---")
# 按鈕觸發生成
if st.button("生成雲端架構圖", help="點擊按鈕生成架構圖"):
    if user_input:
        with st.spinner("生成中，請稍候..."):
            try:
                # 呼叫 RAG Chain 生成程式碼
                rchain_response = rag_chain.invoke(user_input)

                # 提取 ``` 內的程式碼
                code_pattern = r"```python(.*?)```"
                match = re.search(code_pattern, rchain_response, re.DOTALL)

                # 保留程式碼以外的說明文字
                explanation = re.sub(
                    code_pattern, "", rchain_response, flags=re.DOTALL).strip()
                if explanation:
                    st.markdown("### 架構設計說明")
                    st.write(explanation)

                if match:
                    # 取得程式碼
                    diagram_code = match.group(1).strip()

                    # 建立執行環境並執行程式碼
                    exec(diagram_code)

                    # 顯示生成的架構圖
                    st.image(f"secure_website_system_architecture.png",
                             caption="生成的架構圖", use_column_width=True)
                    st.success("架構圖生成成功！")
                else:
                    st.error("未能擷取到程式碼，請檢查輸入內容或格式。")
            except Exception as e:
                st.error(f"生成程式碼時發生錯誤：{e}")
    else:
        st.warning("請輸入需求後再進行生成")